<template>
  <div class="table-content">
    <el-table
      :data="tableData"
      ref="table"
      @row-click="elemClick($event, {emit: 'rowClick'})"
      @selection-change="elemClick($event, {emit: 'handleSelectionChange'})"
      @select-all="elemClick($event, {emit: 'handleSelectionAll'})"
      style="width: 100%"
      tooltip-effect="light"
    >
      <el-table-column v-if="showSelection" type="selection" :selectable="selectable" width="55"/>
      <el-table-column type="index" label="序号" width="60" align="center"/>
      <template v-for="(item,index) in tableColumn">
        <template v-if="item.type === 'image'">
          <el-table-column
            :label="item.label"
            :show-overflow-tooltip="item.showOverflowTooltip"
            align="center"
            v-bind="item.attr"
          >
            <template slot-scope="{row}">
              <div class="img-wrap" v-if="row[item.prop]">
                <el-tooltip
                  v-for="(imgItem,index) in getFileUrlList(row[item.prop])"
                  :key="index"
                  effect="dark" content="点击放大"
                  placement="top"
                >
                  <el-image
                    :key="index"
                    :src="imgItem"
                    :preview-src-list="getFileUrlList(row[item.prop])"
                    :style="item.style"
                    fit="contain"
                    class="el-image"
                  />
                </el-tooltip>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </template>
        <template v-else-if="item.type === 'select'">
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :show-overflow-tooltip="item.showOverflowTooltip"
            align="center"
            :width="item.width"
            v-bind="item.attr"
          >
            <template slot-scope="{row}">
              {{getDictLabel(
              item.options || [],
              row[item.prop],
              item.attr? item.attr.value : 'value',
              item.attr? item.attr.label : 'label'
              )}}
            </template>
          </el-table-column>
        </template>
        <template v-else-if="item.type === 'btn'">
          <el-table-column
            :label="item.label"
            :show-overflow-tooltip="item.showOverflowTooltip"
            align="center"
            v-bind="item.attr"
          >
            <template #default="{row}">
              <template v-for="(btn,b) in item.btnArr">
                <el-button
                  @click.stop="elemClick(row, btn)"
                  :size="btn.size||''"
                  type="text"
                  :icon="btn.icon"
                  v-bind="btn.attr"
                  :disabled="btn.disabledRule ? btn.disabledRule(row) : false"
                  v-hasPermi="btn.permissions ? [btn.permissions] : null"
                >
                  {{ btn.text }}
                </el-button>
              </template>
            </template>
          </el-table-column>
        </template>
        <template v-else-if="item.type === 'slot'">
          <el-table-column
            :label="item.label"
            :show-overflow-tooltip="item.showOverflowTooltip"
            align="center"
            v-bind="item.attr"
          >
            <template slot-scope="{row}">
              <slot name="custom" :item="item" :row="row"></slot>
            </template>
          </el-table-column>
        </template>
        <template v-else-if="item.type === 'file'">
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :show-overflow-tooltip="item.showOverflowTooltip"
            align="center"
            v-bind="item.attr"
          >
            <template slot-scope="{row}">
              <a v-if="row[item.prop]" :href="$file+row[item.prop]" :style="{color: '#00afff'}" target="_blank">附件</a>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </template>
        <template v-else-if="item.type === 'bool'">
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :show-overflow-tooltip="item.showOverflowTooltip"
            align="center"
            v-bind="item.attr"
          >
            <template slot-scope="{row}">
              <span>{{ row[item.prop] ? '是' : '否' }}</span>
            </template>
          </el-table-column>
        </template>
        <template v-else-if="item.type === 'time'">
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :show-overflow-tooltip="item.showOverflowTooltip"
            align="center"
            :width="item.width || 100"
            v-bind="item.attr"
          >
            <template slot-scope="{row}">
              {{ row[item.prop] ? $moment(row[item.prop]).format(item.format || 'YYYY-MM-DD HH:mm:ss'): '-' }}
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :show-overflow-tooltip="item.showOverflowTooltip"
            align="center"
            v-bind="item.attr"
          />
        </template>
      </template>
    </el-table>
  </div>
</template>

<script>
import {getDictLabel} from '@/utils/index'
export default {
  name: "tableContent",
  props: {
    tableData: {
      type: Array,
      default: () => [
        {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
        {date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄'}
      ]
    },
    tableColumn: {
      type: Array,
      default: () => [
        {label: '日期', prop: 'date'},
        {label: '姓名', prop: 'name'},
        {label: '地址', prop: 'address'},
      ]
    },
    showSelection: {
      type: Boolean,
      default: false
    },
    selectable: {
      type: Function
    }
  },
  methods: {
    getDictLabel,
    getFileUrlList(val) {
      if (val) {
        return Array.isArray(val) ? val : val.split(',');
      } else {
        return [];
      }
    },
    elemClick(row, item) {
      this.$emit(item.emit, row)
      this.$emit('clickEvent', {item, row})
    }
  }
}
</script>

<style scoped lang="scss">
.table-content {

  .img-wrap {
    display: flex;
    justify-content: center;

    .el-image {
      display: block;
      width: 50px;
      height: 50px;
      margin-right: 5px;
      background: #eef0f3;

      &:last-child {
        margin-right: 0;
      }
    }
  }

}
</style>
